<template>
  <div class="app-container" v-if="!isExport">
    <el-form ref="queryForm" :model="queryParams" inline>
      <el-form-item>
        <!-- <el-select
          v-model="result_personalList.scaleTitle"
          placeholder="---量表名称---"
        >
          <el-option label="日常生活能力评定量表" value="daily"></el-option>
          <el-option label="个人生活能力评定量表" value="personal"></el-option>
          <el-option label="全部" value="all"></el-option>
        </el-select> -->
        <el-select v-model="queryParams.scaleTitle" @change="handleScaleId" clearable placeholder="量表名称">
          <el-option v-for="(item,index) in scaleTitleList" :label="item.scaleTitle" :value="item.scaleTitle"
            :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="queryParams.deptName" placeholder="部门名称" clearable  @keyup.enter.native="handleQuery"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="queryParams.loginName" placeholder="登录名" clearable @keyup.enter.native="handleQuery"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="queryParams.startTime"
          type="datetime"
          placeholder="开始日期"
          @keyup.enter.native="handleQuery"
          clearable>
        </el-date-picker>
        <el-date-picker
          v-model="queryParams.endTime"
          type="datetime"
          placeholder="结束日期"
          @keyup.enter.native="handleQuery"
          clearable>
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item>
        <el-select v-model="analysisForm.sex" placeholder="性别">
          <el-option label="男" value="man"></el-option>
          <el-option label="女" value="woman"></el-option>
          <el-option label="不详" value="notAll"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button type="warning" icon="el-icon-refresh" @click="handleReset">
          重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" type="border-card" class="el-tabs">
      <el-tab-pane label="团体报告" name="indReport">
        <el-row :gutter="10">
          <el-col :span="10">
            <el-table
              ref="loginFormRef"
              :data="result_personalList"
              tooltip-effect="dark"
              style="width: 100%"
              border
              stripe
              :header-cell-style="{
                'text-align': 'center',
                background: '#2196f3',
                color: '#fff',
              }"
              :cell-style="{ 'text-align': 'center' }"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="resultId" width="50" label="id">
              </el-table-column>
              <el-table-column prop="loginName" label="登录名" width="100">
              </el-table-column>
              <el-table-column prop="userName" label="姓名" width="100">
              </el-table-column>
              <el-table-column prop="deptName" label="部门" width="100">
              </el-table-column>
              <el-table-column prop="createTime" label="提交时间">
              </el-table-column>
            </el-table>
            <!-- <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="3"
              :page-sizes="[2, 3, 5, 10]"
              :page-size="100"
              layout="total, sizes, prev,jumper,next"
              :total="total"
              style="margin: 1.5rem 0; text-align: end"
            >
            </el-pagination> -->
            
            <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
            <div class="text" style="margin: 1.5rem 0;">
              注:1.部分量表不支持生成团体报告，不在量表选择范围内<br> 
              2.为了保障系统的正常运行，建议您一次统计分析数量不超过5000人。
            </div>
          </el-col>
          <el-col :span="3" :offset="1">
            <el-button type="primary" icon="el-icon-search" @click="openDialog"
              >组合</el-button
            >
          </el-col>
          <el-col :span="10">
            <el-table
              ref="combFormRef"
              :data="combTable"
              tooltip-effect="dark"
              style="width: 100%"
              border
              stripe
              :header-cell-style="{
                'text-align': 'center',
                background: '#2196f3',
                color: '#fff',
              }"
              :cell-style="{ 'text-align': 'center' }"
            >
              <el-table-column prop="combinationName" label="名称">{{combTable.combinationName}} </el-table-column>
              <el-table-column label="操作" width="170">
                <template slot-scope="scope">
                  <el-link type="primary" :underline="false" @click="del(scope.row)"
                    >[删除]</el-link>
                    <el-link type="primary" :underline="false" @click="gotoReport(scope.row)"
                    >[生成报告]</el-link>
                </template>
              </el-table-column>
            </el-table>
            <div class="btn">
              <!-- <el-button type="danger" icon="el-icon-delete" plain size="mini"
                >清空</el-button
              >
              <el-button type="success" icon="el-icon-s-order" plain size="mini"
                >生成团体报告</el-button
              > -->
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <!-- <el-tab-pane label="团队报告" name="teamReport"> </el-tab-pane> -->
    </el-tabs>

    <el-dialog :visible.sync="dialogFormVisible" width="30%">
      <span>
        <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogRule">
          <el-form-item prop="combinationName">
            <el-input
              v-model="dialogForm.combinationName"
              placeholder="输入组合名称"
            ></el-input>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="out()">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { listResult_personal, getResult_personal, delResult_personal, addResult_personal, updateResult_personal } from "@/api/mentalTest/personScore";
import { listScale, getScale } from "@/api/mentalTest/scaleManage";
import { listGroupCombination,addGroupCombination,remove,delGroupCombination } from "@/api/mentalTest/groupCombination";
export default {
  name: "totalInfo",
  data() {
    return {
      // 组合弹框
      //传回去id
      ids:[],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      dialogFormVisible: false,
      result_personalList:[],
      scaleTitleList:[],
      analysisForm: {
        scaleTitle: null, //量表名称
        departName: null, //部门名称
        time: null,
        sex: null,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        scaleId: null,
        scaleTitle: null,
        resultId: null,
        loginName: null,
        userName: null,
        countScore: null,
        factorScore: null,
        resultContent: null,
        factorResult: null,
        userAnswer: null,
        classesName: null,
        deptName: null,
        createTime:null,
        startTime:null,
        endTime:null,
        riskLevel:10,
      },
      form:{

      },
      //查询所属测评量表的参数
      queryTitle: {
        scaleId: null,
        scaleTitle: '',
      },
      activeName: "indReport",
      // 登录表格
      loginTable: [],
      multipleSelection: [],
      total: 0,
      // 组合表格
      combTable: [],
      combName:null,
      // 弹框
      dialogForm: {
        resultIds:[],
        combinationName: null,
        scaleId:null,
      },
      dialogRule: {
        name: [{ required: true, message: "请输入组合名称", trigger: "blur" }],
      },
      // 是否为导出页面
      isExport: false,
    };
  },
  created(){
    this.getTitle();
  },
  methods: {
     /** 查询所有人测评成绩报告列表 */
    getList () {
      console.log("this.queryParams",this.queryParams);
      listResult_personal(this.queryParams).then(response => {
        console.log("111", response.rows);
        this.result_personalList = JSON.parse(JSON.stringify(response.rows));
        console.log(typeof(this.result_personalList));
        this.total = response.total;
      });
      console.log("dialogForm",this.dialogForm);
      listGroupCombination(this.dialogForm.scaleId).then(response =>{
        this.combTable = response.data
        console.log("combTable",this.combTable);
      });
    },
    //为得到scaleId的回调函数
    handleScaleId (selectedValue) {
      const selectedScale = this.scaleTitleList.find(item => item.scaleTitle === selectedValue);
      if (selectedScale) {
        const scaleId = selectedScale.scaleId;
        this.dialogForm.scaleId = parseInt(scaleId);
      }
    },
    //得到所有所属测评量表的标题
    getTitle () {
      listScale(this.queryTitle).then(response => {
        // console.log("所有",response.rows);
        this.scaleTitleList = response.rows;
        // console.log(this.scaleTitleList);
      })
    },
    // 搜索
    handleQuery() {
      this.queryParams.pageNum = 1;
      //查询对应的scaleId对应的人以及组合
      this.getList();
    },
    // 重置
    handleReset() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.resultId)
      this.dialogForm.resultIds = selection.map(item => item.resultId)
      this.single = selection.length !== 1
      this.multiple = !selection.length;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange() {},
    //删除单条
    del(row) {
      const combinationId = parseInt(row.combinationId || this.ids);
      const combinationName =row.combinationName;
      this.$modal.confirm('是否确认删除团体名称为"' + combinationName + '"的数据项？').then(function () {
        return delGroupCombination(combinationId);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    //生成团体报告
    gotoReport(row) {
      this.$router.push({
        path: '/mentalTest/totalReport',
        query: {
          combinationId: row.combinationId,
          combinationName: row.combinationName,
        }
      })
    },
    openDialog() {
      this.dialogFormVisible = true;
    },
    // 取消提交
    out() {
      this.dialogFormVisible = false;
      this.$refs.dialogFormRef.resetFields();
    },
    // 提交组合弹框表单
    submitForm() {
      console.log("dialogForm",this.dialogForm);
      this.$refs.dialogFormRef.validate((valid) => {
        if (valid) {
          this.combName = this.dialogForm.combinationName;
          this.combTable.push(this.combName)
          console.log("combTable",this.combTable);
          console.log("combName",this.combName);
          addGroupCombination(this.dialogForm).then(response=>{
            console.log("提交成功");
            this.dialogFormVisible = false;
            this.getList();
          });
        } else {
          console.log("提交失败");
        }
      });
    },
    
    // 取消
    cancel() {
      this.isExport = false;
      this.reset();
    },
      // 表单重置
    reset() {
      this.result_personalList=[];
      this.form = {
        scaleId: null,
        scaleTitle: null,
        resultId: null,
        loginName: null,
        userName: null,
        countScore: null,
        factorScore: null,
        resultContent: null,
        factorResult: null,
        userAnswer: null,
        classesName: null,
        deptName: null,
        createTime:null,
        startTime:null,
        endTime:null,
      };
      this.resetForm("form");
    },
  },
};
</script>

<style scoped>
.app-container {
  min-height: 100vh;
}
.el-tabs {
  min-height: 80vh;
}
.text {
  font-size: 0.8rem;
  text-align: center;
}
.btn {
  margin: 1.5rem 0;
  text-align: end;
}
</style>